import {
  createSlice,
  createAsyncThunk,
  ActionCreatorWithPayload,
} from "@reduxjs/toolkit";
import { RootState } from "@/app/store";
import { reqLogin, reqGetUserInfo, reqLogout } from "@api/user";


export interface LoginParams {
  username: string;
  password: string;
}

// 1. 定义初始化状态
const initialState = {
  // 应该从localStorage中读取token数据，有就用，没有空串
  token: localStorage.getItem("token") || "", // 用户唯一标识
  name: "", // 用户名
  avatar: "", // 用户头像
  isShow: true, //表示路由显示
};

// 异步action
// 登录
export const loginAsync = createAsyncThunk(
  "user/loginAsync",
  ({ username, password }: LoginParams) =>
  {
    return reqLogin(username, password)
  } 
);
// 获取用户信息
export const getUserInfoAsync = createAsyncThunk("user/getUserInfoAsync", () =>
{

  return reqGetUserInfo()

}
);
// 登出
export const logoutAsync = createAsyncThunk("user/logoutAsync", () => {
  reqLogout();
});

// 2. 创建redux模块
const userSlice = createSlice({
  name: "user", //别名
  initialState, //上面定义的用户初始化信息state 状态   推荐设置为一个对象
  reducers: {
    // //清空用户信息
    // reset:(state,{payload})=>{
    //   localStorage.removeItem("token")
    //   state = initialState
    // }
  },
  extraReducers: (builder) =>
    builder
      .addCase(loginAsync.fulfilled, (state, action) => {
        // action.payload就是上一步结果值
        const token = action.payload.token;
        // 将token存储在redux中
        state.token = token;
        // 将token存储在localStorage中
        localStorage.setItem("token", token);
        state.isShow = false;
        console.log(state.isShow, "login中slice585858585");
      })
      .addCase(getUserInfoAsync.fulfilled, (state, action) => {
        // action.payload就是上一步结果值
        const { name, avatar } = action.payload;
        state.name = name;
        state.avatar = avatar;
        state.isShow = false;
        // console.log(action.payload,86868686)
       
      })
      .addCase(logoutAsync.fulfilled, (state) => {
        state.token = "";
        state.name = "";
        state.avatar = "";
        state.isShow = true;
        localStorage.removeItem("token");
      }),
});

// 3. 将redux模块的reducer函数暴露出去，汇总,生成整个store容器对象
export default userSlice.reducer;

// 向外暴露用于读取当前模块的状态数据的select函数
export const selectUser = (state: RootState) => state.user;
